<template>
  <el-container style="height: 90vh;">
    <!-- 侧边栏 -->
    <el-aside width="200px" style="background-color: #f4f4f4;">
      <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item index="1">题目管理</el-menu-item>
        <el-menu-item index="2">用户管理</el-menu-item>
        <el-menu-item index="3">文章管理</el-menu-item>
        <el-menu-item index="4">比赛管理</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主体内容区域 -->
    <el-main>
      <!-- 使用v-if来控制不同模块的显示 -->
      <UserManagement v-if="activeModule === '2'" />
      <QuestionManagement v-if="activeModule === '1'" />
      <ArticleManagement v-if="activeModule === '3'" />
      <ContestManagement v-if="activeModule === '4'" />
    </el-main>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import UserManagement from "./UserModule.vue";  // 使用相对路径
import QuestionManagement from "./QuestionModule.vue";  // 使用相对路径
import ArticleManagement from "./ArticleModule.vue";  // 使用相对路径
import ContestManagement from "./ContestModule.vue";  // 使用相对路径

export default defineComponent({
  name: "AdminPage",
  components: {
    UserManagement,
    QuestionManagement,
    ArticleManagement,
    ContestManagement,
  },
  setup() {
    // 当前显示的模块
    const activeModule = ref("1");

    // 选择菜单项时切换显示的模块
    const handleSelect = (index: string) => {
      activeModule.value = index;
    };

    return {
      activeModule,
      handleSelect,
    };
  },
});
</script>

<style scoped>
/* 自定义样式 */
.el-aside {
  background-color: #504f4f;
}

.el-menu {
  height: 100%;
}

.el-main {
  padding: 20px;
}
</style>
